<template>
  <div>
    <button @click="playTimeVideo">播放</button>
    <video ref="videoRef" id="myVideo" class="video-js vjs-default-skin" controls preload="auto"></video>
    <!-- <div id="timeSlider"></div> -->
  </div>
</template>
<script setup>
// import initTimeSlider from 'video-time-slider';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { defineEmits, onMounted, ref, watch } from 'vue';

const videoRef = ref(null);
let videoPlayer = {}
const { isPlay } = defineProps(['isPlay'])
const emit = defineEmits(['changePlay'])
onMounted(() => {
  // videoPlayer = videojs(videoRef.value as HTMLVideoElement, {
  videoPlayer = videojs(videoRef.value, {
    sources: [
      {
        src: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8',
        type: 'application/x-mpegURL'
      }
    ]
  });
  console.log(isPlay, 'video');

  // 假设视频时长为 120 秒，当前播放时间为 30 秒，用于示例数据
  const presentSeconds = 30;
  const totalSeconds = 120;

  // 定义时间块数组，格式为 ["开始时间-结束时间-类型",...]
  const curDaytimeChunkArray = ['000000-030000-A', '030000-060000-B', '060000-120000-C'];

  // 定义时间块类型的颜色映射
  const timeChunkType = {
    A: 'red',
    B: 'green',
    C: 'blue'
  };

  // 定义时间轴滑块的速度（这里是示例速度，可根据需求调整）
  const speed = 1;

  // 是否自动开始播放
  const isInitialPlay = true;

  // 使用 nextTick 确保 DOM 更新后初始化时间轴滑块
  // nextTick(() => {
  //   initTimeSlider('#timeSlider', {
  //     video: videoPlayer,
  //     curDaytimeChunkArray,
  //     presentSeconds,
  //     totalSeconds,
  //     timeChunkType,
  //     speed,
  //     isInitialPlay
  //     // isDraggable: false // 假设该库有此配置选项来禁止拖动
  //   });
  // });

  // 监听视频播放时间更新事件，同步时间轴滑块的位置
  // videoPlayer.on('timeupdate', () => {
  //   const currentTime = videoPlayer.currentTime();
  //   const slider = document.getElementById('timeSlider') as HTMLElement;
  //   if (slider) {
  //     // 根据视频当前时间更新时间轴滑块的位置（这里只是简单示例，实际可能需要更精确的计算）
  //     slider.style.left = `${(currentTime / totalSeconds) * 100}%`;
  //   }
  // });
  videoPlayer.on('timeupdate', () => {
    console.log('timeupdate');

    const currentTime = videoPlayer.currentTime();
    const totalSeconds = videoPlayer.duration();
    const slider = document.getElementById('timeSlider');
    // if (slider) {
    //   const progressWidth = (currentTime / totalSeconds) * slider.offsetWidth;
    //   slider.querySelector(':after').style.width = `${progressWidth}px`;
    // }
  });
  videoPlayer.on("play", () => {
    console.log("视频开始播放")
    // isPlay.value = true;
    emit('changePlay', true)
  });
  videoPlayer.on("pause", () => {
    console.log("视频暂停播放")
    // isPlay.value = false;
    emit('changePlay', false)
  });
  // 监听时间轴滑块点击事件，跳转到指定时间
  // document.getElementById('timeSlider').addEventListener('click', (e) => {
  //   const target = e.target as HTMLElement;
  //   if (!target || !target.dataset.time) return;
  //   videoPlayer.currentTime(Number(target.dataset.time));
  // });

  // console.log(videoPlayer, 'current time', videoPlayer);
  // let video = document.getElementById('myVideo');

  // let currentTime = video.currentTime;
});

function playTimeVideo () {
  // let currentTime = videoPlayer.currentTime;
  // console.log(currentTime, 'current time', videoPlayer);
  // let video = document.getElementById('myVideo');
  // let currentTime = video.currentTime;
  console.log('current time', videoPlayer);
  videoPlayer.currentTime(254)
  videoPlayer.play();
}
watch(() => isPlay, (newValue, oldValue) => {
  console.log(`video 新值:${newValue} ——— 老值:${oldValue}`);
  if (newValue) {
    // 播放
    videoPlayer.currentTime(254)
    videoPlayer.play();
  } else {
    // 暂停
    // clearInterval(timer)
    videoPlayer.pause();
  }
});
</script>
<style scoped>
.video-js {
  width: 640px;
  /* 根据你的视频实际宽度设置 */
  height: 360px;
}

#timeSlider {
  width: 640px;
  /* 设置为和视频一样的宽度 */
  height: 5px;
  background-color: gray;
  position: relative;
  cursor: default;
  /* 禁止鼠标指针变为可拖动样式 */
  user-select: none;
  /* 禁止用户选择时间轴元素 */
}

#timeSlider:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

#timeSlider:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: green;
}
</style>